<template>
    <div>
        <input 
            type="checkbox" 
            :checked="item.status === FINISHED"
            @click="setStatus(item.id)"
        />
        <span>{{item.content}}</span>
        <button @click="removeTodo(item.id)">删除</button>
        <button @click="setDoing(item.id)" v-if="item.status !== FINISHED">
            {{item.status === DOING ? '正在做...' : '准备做'}}
        </button>
    </div>
</template>

<script lang="ts">
    import { defineComponent, PropType } from 'vue'
    import { ITodo, TODO_STATUS } from '../typing'
    export default defineComponent({
        name: 'TodoItem',
        props: {
            item: Object as PropType < ITodo >
        },
        setup(props, { emit }) {
            const stateStatus = {
                WILLDO: TODO_STATUS.WILLDO,
                DOING: TODO_STATUS.DOING,
                FINISHED: TODO_STATUS.FINISHED,
            }
            function setStatus(id:number):void{
                emit('setStatus',id)

            }
            function removeTodo(id:number):void{
                emit('removeTodo',id)

            }
            function setDoing(id:number):void{
                emit('setDoing',id)
            }
            return {
                ...stateStatus,
                setStatus,
                removeTodo,
                setDoing
            }
        }
    })
</script>

<style>

</style>